<template>
  <div class="box">
    <h1>组件间通信7：$ref & $children $parent</h1>
    <p>BABA有存款: {{money}}</p>
    <button @click="borrowMoney1(100)">找小明借钱100</button>
    <button @click="borrowMoney2(150)">找小红借钱150</button>
    <hr/>
    <Son ref="sonRef"/>
    <hr/>
    <Daughter ref="dauRef" />
  </div>
</template>

<script setup lang="ts" name="RefChildrenParent">
import Son from "./Son.vue"
import Daughter from "./Daughter.vue"

  import {ref} from 'vue'
  const money = ref(1000)
  // 获取子级组件
  const sonRef = ref<InstanceType<typeof Son> |null>(null)
  const dauRef = ref<InstanceType<typeof Daughter> | null>(null)
  // 借钱方法1
  const borrowMoney1 = (num: number) => {
    (sonRef.value as any)?.borrowMoney(num)
    money.value +=num
  }
  // 借钱方法2
  const borrowMoney2 = (num: number) => {
    (dauRef.value as any)?.borrowMoney(num)
    money.value += num
  }

  const receiveMoney =(num: number) =>{
    money.value +=num
  }
  //向外暴露组件内的方法
  defineExpose({
    receiveMoney
  })
</script>

<style scoped>

</style>
